<template>
  <!--  库存查询-->
  <div class="full-box">
    <el-row class="row1">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a>库房管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>库存查询</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row class="searchArea">
      <el-form label-width="150px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="通用名">
              <el-input v-model="data.product.nickName">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="商品名">
              <el-input v-model="data.product.productName">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商">
              <el-input v-model="data.product.suppliers">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="产品批号">
              <el-select v-model="data.product.classs" placeholder="全部批号">
                <el-option v-for="classs in data.classes" :label="classs.descs" :value="classs.descs">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="剂型">
              <el-select v-model="data.product.type" placeholder="全部剂型">
                <el-option v-for="type in data.types" :label="type.descs" :value="type.descs">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="">
              <el-button @click="query" type="success" style="width: 200px">
                <el-icon>
                  <Search/>
                </el-icon>&nbsp;&nbsp;搜索
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row>
      <el-button-group>
        <el-button type="success" @click="insertNew">
          <el-icon>
            <CirclePlus/>
          </el-icon>&nbsp;
          新增
        </el-button>
        <el-button type="primary">
          <el-icon>
            <Printer/>
          </el-icon>&nbsp;
          打印
        </el-button>
        <el-button type="warning">
          <el-icon>
            <Promotion/>
          </el-icon>&nbsp;
          上传
        </el-button>
        <el-button type="danger">
          <el-icon>
            <Download/>
          </el-icon>&nbsp;
          下载
        </el-button>
      </el-button-group>
    </el-row>
    <el-row class="table">
      <el-table :data="data.list"
                class="table-box"
                border stripe>
        <el-table-column type="index" label="序号" width="80px"></el-table-column>
        <el-table-column prop="nickName" label="通用名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="productName" label="商品名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="unit" label="包装规格"></el-table-column>
        <el-table-column prop="suppliers" label="生产厂家" show-overflow-tooltip></el-table-column>
        <el-table-column prop="classs" label="产品批号"></el-table-column>
        <el-table-column prop="type" label="剂型"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="stockCount" label="库存"></el-table-column>
        <el-table-column label="操作" width="300px" align="center">
          <template #default="scope">
            <el-button-group>
              <el-button type="primary" @click="addSto(scope.row)">
                <el-icon>
                  <DocumentAdd/>
                </el-icon>&nbsp;
                入库
              </el-button>
              <el-button type="warning" @click="updateSto(scope.row)">
                <el-icon>
                  <DocumentAdd/>
                </el-icon>&nbsp;
                更新库存
              </el-button>
              <el-button type="danger" @click="btnDelete(scope.row)">
                <el-icon>
                  <Delete/>
                </el-icon>&nbsp;
                删除
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="width: 1220px; display: flex;justify-content: right">
        <el-pagination
            style="margin-top: 10px"
            v-model:current-page="data.stockPage.currentPage"
            @current-change="handleCurrentChangeStock"
            layout="prev, pager, next"
            :page-size="5"
            :total="data.stockPage.total"
        />
      </el-row>
    </el-row>
  </div>

  <el-dialog
      v-model="data.dialog.dialogVisible"
      :title=data.dialog.title
      width="500"
      :before-close="handleClose"
  >
    <el-form label-width="120px">

      <el-form-item label="通用名" v-show="data.otherIf">
        <el-input style="width: 240px" v-model="data.dialog.product.nickName"></el-input>
      </el-form-item>
      <el-form-item label="商品名" v-show="data.otherIf">
        <el-input style="width: 240px" v-model="data.dialog.product.productName"></el-input>
      </el-form-item>
      <el-form-item label="包装规格" v-show="data.otherIf">
        <el-input style="width: 240px" v-model="data.dialog.product.unit"></el-input>
      </el-form-item>
      <el-form-item label="生产厂家" v-show="data.otherIf">
        <el-input style="width: 240px" v-model="data.dialog.product.suppliers"></el-input>
      </el-form-item>
      <el-form-item label="生产批号" v-show="data.otherIf">
        <el-select v-model="data.dialog.product.classId" placeholder="全部批号" style="width: 240px">
          <el-option v-for="classs in data.classes" :label="classs.descs" :value="classs.dictId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="剂型" v-show="data.otherIf">
        <el-select v-model="data.dialog.product.typeId" placeholder="全部剂型" style="width: 240px">
          <el-option v-for="type in data.types" :label="type.descs" :value="type.dictId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="价格" v-show="data.otherIf">
        <el-input style="width: 240px" v-model="data.dialog.product.price"></el-input>
      </el-form-item>
      <el-form-item label="入库数量" v-show="data.otherIf">
        <el-input style="width: 240px" v-model="data.dialog.product.stockCount"></el-input>
      </el-form-item>
      <el-form-item label="数量" v-show="data.addStoIf">
        <el-input style="width: 240px" v-model="data.dialog.addSto"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.dialog.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="btnConfirm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, onMounted} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const data = reactive({
  list: [],
  stockPage: {
    currentPage: 1,
    total: ""
  },
  classes: [],
  types: [],
  product: {
    nickName: "",
    productName: "",
    suppliers: "",
    classs: "",
    type: ""
  },
  dialog: {
    dialogVisible: false,
    title: "",
    addSto: "",
    product: {
      productId: "",
      nickName: "",
      productName: "",
      unit: "",
      suppliers: "",
      classId: "",
      typeId: "",
      stockCount: "",
      price: ""
    }
  },
  updateSto: 0,
  addStoIf: false,//添加库存行
  otherIf: false//新增表格信息显示
})

//list信息
const handleCurrentChangeStock = () => {

  if (data.product != null) {
    query();
  } else {
    axios({
      url: "http://localhost:8080/productView/selectAll",
      method: "get",
      params: {
        currentPage: data.stockPage.currentPage,
        size: 5
      }
    }).then((res) => {
      data.list = res.data.data;
      data.stockPage.total = res.data.total;
    })
  }

}

//下拉
const initSelect = () => {
  //批号
  axios({
    url: "http://localhost:8080/dict/selectClass",
    method: "get",
    params: ""
  }).then((res) => {
    data.classes = res.data.data;
  })
  //剂型
  axios({
    url: "http://localhost:8080/dict/selectType",
    method: "get",
    params: ""
  }).then((res) => {
    data.types = res.data.data;
  })
}

onMounted(() => {
  handleCurrentChangeStock();
  initSelect();
})

//查询

const query = () => {
  axios({
    url: "http://localhost:8080/productView/myQuery",
    method: "get",
    params:
        {
          currentPage: data.stockPage.currentPage,
          size: 5,
          nickName: data.product.nickName,
          productName: data.product.productName,
          suppliers: data.product.suppliers,
          classs: data.product.classs,
          type: data.product.type
        }
  }).then((res) => {
    data.list = res.data.data;
    data.stockPage.total = res.data.total;
  })
}

//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}
//删除
const btnDelete = (row: any) => {
  axios({
    url: "http://localhost:8080/product/deleteById",
    method: "post",
    params: {
      productId: row.productId
    }
  }).then((res) => {
    if (res.data.success) {
      successMessage("删除成功")
      handleCurrentChangeStock();//成功刷新页面
    } else {
      errorMessage("删除失败")
    }
  })
}
//入库
const addSto = (row: any) => {
  data.dialog.addSto = "";
  data.otherIf = false;
  // data.updateSto = 0
  data.addStoIf = true;
  data.dialog.dialogVisible = true;
  data.dialog.title = "入库";
  data.updateSto = row.stockCount;
  data.dialog.product.productId = row.productId;
}
//更新
const updateSto = (row: any) => {
  data.dialog.addSto = "";
  data.otherIf = false;
  // data.updateSto = 0
  data.addStoIf = true;
  data.dialog.dialogVisible = true;
  data.dialog.title = "更新库存";
  data.updateSto = row.stockCount;
  data.dialog.product.productId = row.productId;
}
const initProduct = () => {
  data.dialog.product.productId = "";
  data.dialog.product.productName = "";
  data.dialog.product.suppliers = "";
  data.dialog.product.price = "";
  data.dialog.product.unit = "";
  data.dialog.product.stockCount = "";
  data.dialog.product.classId = "";
  data.dialog.product.nickName = "";
  data.dialog.product.typeId = "";
}
const insertNew = () => {
  initProduct();
  data.dialog.dialogVisible = true;
  data.addStoIf = false;
  data.dialog.title = "入库新产品";
  data.otherIf = true;
}
const btnConfirm = () => {
  if (data.dialog.title == "入库") {
    data.updateSto = data.updateSto + parseInt(data.dialog.addSto);
    axios({
      url: "http://localhost:8080/product/updateSto",
      method: "post",
      params: {
        productId: data.dialog.product.productId,
        finishQuantity: data.updateSto
      }
    }).then((res) => {
      if (res.data.success) {
        data.dialog.dialogVisible = false;
        successMessage("入库成功");
        handleCurrentChangeStock();
      } else {
        errorMessage("入库失败");
      }
    })
  }
  if (data.dialog.title == "更新库存") {
    data.updateSto =parseInt(data.dialog.addSto);
    axios({
      url: "http://localhost:8080/product/updateSto",
      method: "post",
      params: {
        productId: data.dialog.product.productId,
        finishQuantity: data.updateSto
      }
    }).then((res) => {
      if (res.data.success) {
        data.dialog.dialogVisible = false;
        successMessage("更新成功");
        handleCurrentChangeStock();
      } else {
        errorMessage("更新失败");
      }
    })
  }

  //新增
  if (data.dialog.title == "入库新产品") {
    axios({
      url: "http://localhost:8080/product/insertNew",
      method: "post",
      params: data.dialog.product
    }).then((res) => {
      if (res.data.success) {
        data.dialog.dialogVisible = false;
        successMessage("入库成功");
        handleCurrentChangeStock();
      } else {
        errorMessage("入库失败");
      }
    })
  }
}
</script>

<style scoped>
.full-box {
  margin: 15px;
  width: 100%;
  height: 100vh;
}

.table {

}

.table-box {

  display: flex;
  justify-content: center;
  margin-right: 30px;
}

.row1 {
  margin-top: 15px;
  margin-bottom: 30px;
}
</style>